<template>
	<view class="goodredpacket">
		<view class="top-bg"></view>
		<view class="data-box">
			<view class="settlement-packet-box">
				<view class="waiting-settlement">
					<view class="waiting-settlement-title">
						<view>待结算自购商品红包(元)</view>
						<view  class="settlement-info" @tap="toSettlementInfo">结算明细</view>
					</view>
					<view class="waiting-settlement-num">{{ estimateData.waitting_settle_self_bought }}</view>
				</view>
				<!-- <view class="red-packet-type">
					<view class="red-packet-self">
						<view class="red-packet-type-item">自购商品红包</view>
						<view class="red-packet-type-item-num">{{ estimateData.waitting_settle_self_bought ==0?'0':estimateData.waitting_settle_self_bought }}</view>
					</view>
					<view>
						<view class="red-packet-type-item">平台奖励红包</view>
						<view class="red-packet-type-item-num">{{ estimateData.waitting_settle_child_bought == 0?'0':estimateData.waitting_settle_child_bought }}</view>
					</view>
				</view> -->
				<view class="tips">1. 结算后金额转入钱包余额</view>
				<view class="tips">2. 每个月25日自动结算上个自然月的商品红包收入</view>
			</view>
			<view class="today-estimate">
				<view class="big-item-title">今日预估(元)</view>
				<view class="item">
					<view class="item-title">自购商品红包</view>
					<view class="item-num">{{ estimateData.day_estimate_self==0?'0' :  estimateData.day_estimate_self }}</view>
				</view>
				<!-- <view class="item">
					<view class="item-title">平台奖励红包</view>
					<view class="item-num">{{ estimateData.day_estimate_child==0?'0' :  estimateData.day_estimate_child }}</view>
				</view>
				<view class="item">
					<view class="item-title">今日红包总计</view>
					<view class="item-num item-num1">{{ estimateData.day_estimate_all==0?'0' :  estimateData.day_estimate_all }}</view>
				</view> -->
			</view>
			<view class="month-estimate">
				<view class="big-item-title">本月预估(元)</view>
				<view class="item">
					<view class="item-title">自购商品红包</view>
					<view class="item-num">{{  estimateData.month_estimate_self==0?'0' :  estimateData.month_estimate_self }}</view>
				</view>
				<!-- <view class="item">
					<view class="item-title">平台奖励红包</view>
					<view class="item-num">{{ estimateData.month_estimate_child==0?'0' :  estimateData.month_estimate_child }}</view>
				</view>
				<view class="item">
					<view class="item-title">本月红包总计</view>
					<view class="item-num item-num1">{{ estimateData.month_estimate_all==0?'0' :  estimateData.month_estimate_all }}</view>
				</view> -->
			</view>
			<view class="red-packet-settlement">
				<view class="big-item-title">红包结算(元)</view>
				<view class="item">
					<view class="item-title">上月红包结算</view>
					<view class="item-num item-num1">{{ estimateData.last_settled==0?'0' :  estimateData.last_settled  }}</view>
				</view>
				<view class="item">
					<view class="item-title">累计红包结算</view>
					<view class="item-num item-num1">{{ estimateData.all_settled==0?'0' :  estimateData.all_settled  }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getBrokeragesCount } from "api/userBrokeragesCountApi"
	export default {
		data() {
			return {
				eyesOpen:true,
				estimateData:{}
			}
		},
		methods: {
			toSettlementInfo(){
				uni.navigateTo({url: `/packs/pages/settlementinfo/settlementinfo`})
			}
		},
		async onShow() {
			let estimateData  = await getBrokeragesCount()
			this.estimateData = estimateData
		}
	}
</script>

<style lang="scss" scoped>
.goodredpacket{
	min-height: 100vh;
	background: #F6F6F6;
}
.data-box{
	position: relative;
	z-index: 1;
	padding-bottom: 100rpx;
}
.top-bg{
	width: 750rpx;
	height: 414rpx;
	background: linear-gradient(180deg, #FE6430 0%, rgba(254, 100, 48, 0) 100%);
	position: fixed;
	left:0;
	top:0;
	z-index:0;
}
.settlement-packet-box{
	width: 686rpx;
	// height: 434rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	margin:36rpx auto 0;
	padding-bottom: 32rpx;
}
.waiting-settlement-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	margin-left:48rpx;
	padding-top: 48rpx;
	image{
		display: block;
		width: 32rpx;
		height: 32rpx;
		margin-left: 16rpx;
	}
}
.settlement-info{
	margin-right: 32rpx;
}
.waiting-settlement-num{
	font-size: 64rpx;
	font-family: DINAlternate-Bold, DINAlternate;
	font-weight: bold;
	color: #FF4924;
	
	margin-left: 48rpx;
}
.red-packet-type{
	display: flex;
	margin: 32rpx 0 64rpx 0;
	.red-packet-self{
		margin:0 168rpx 0 48rpx;
	}
	>view{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		>view:nth-child(2){
			font-size: 48rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			// color: #FF4924;
			color: #333333;
			line-height: 56rpx;
			margin-top: 8rpx;
		}
	}
}
.tips{
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
	line-height: 34rpx;
	margin-left: 48rpx;
}
.today-estimate,.month-estimate{
	width: 622rpx;
	// height:284rpx;
	padding:32rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:16rpx auto 16rpx;
}
.red-packet-settlement{
	width: 622rpx;
	height:204rpx;
	padding:32rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	margin:16rpx auto 16rpx;
}
.big-item-title{
	font-size: 32rpx;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #333333;
	line-height: 44rpx;
}
.item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top:36rpx;
}
.item-title{
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.item-num{
	font-size: 40rpx;
	font-family: DINAlternate-Bold, DINAlternate;
	font-weight: bold;
	// color: #333333;
	color: #FF4924;
	
}
.item-num1{
	color: #FF4924;
}
</style>
